<template>
   <div class="report-list">
      <div class="report-tit">
        <img src="../img/wardR/date-icon.png" alt="">
        <span>报告列表</span>
      </div>
      <div class="report-con">
        <ul>
          <li class="active">
            <div>胸部正位侧片(组)</div>
            <div>2019-02-02</div>
          </li>
          <li>
            <div>胸部正位侧片(组)</div>
            <div>2019-02-02</div>
          </li>
          <li>
            <div>胸部正位侧片(组)</div>
            <div>2019-02-02</div>
          </li>
          <li>
            <div>胸部正位侧片(组)</div>
            <div>2019-02-02</div>
          </li>
          <li>
            <div>胸部正位侧片(组)</div>
            <div>2019-02-02</div>
          </li>
        </ul>
      </div>
    </div>
</template>

<script>
export default {
}
</script>

<style lang="">
   .report-list{
    height: 4.72rem;
    width: 5.42rem;
    padding-left: .3rem;
  }
   .report-list .report-tit{
    height: .52rem;
    display: flex;
    flex-direction: 'cloumn';
    align-items: center;
    font-size: .3rem;
    color: #1c1c1c;
  }

   .report-tit>img{
    width: .36rem;
    height: .36rem;
    vertical-align: middle;
    margin-right: .2rem;
  }
   .report-con>ul{
    height: 4.2rem;
    overflow: auto;
  }
   .report-con>ul>li{
    position: relative;
    padding-left: .5rem;
    margin-bottom: .2rem;
  }
   .report-con>ul>li:before{
    position: absolute;
    content: "";
    display: inline-block;
    width: .2rem;
    height: .2rem;
    border-radius: 50%;
    background-color: #aaaaaa;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
  }
   .report-con>ul .active:before{
    background-color: #27ae9e;
  }
   .report-con>ul .active>div{
    color: #27ae9e;
  }
   .report-con>ul>li>div{
    padding: .07rem 0;
  }
</style>
